<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-row class="ml10" v-show="showSearch">
				<el-form :inline="true" :model="state.queryForm" ref="queryRef">
					<el-form-item label="社保卡" prop="medicalCard">
						<el-input v-model="state.queryForm.medicalCard" placeholder="请输入社保卡" clearable />
					</el-form-item>
					<el-form-item label="姓名" prop="name">
						<el-input placeholder="请输入姓名" v-model="state.queryForm.name" clearable />
					</el-form-item>
					<el-form-item label="身份证" prop="icCard">
						<el-input placeholder="请输入身份证" v-model="state.queryForm.icCard" clearable />
					</el-form-item>

					<el-form-item label="管理状态" prop="healthStatus">
						<el-select v-model="state.queryForm.healthStatus" placeholder="请选择管理状态" clearable>
							<el-option :label="item.label" :value="item.value" v-for="(item, index) in bloodx_health" :key="index" />
						</el-select>
					</el-form-item>

					<el-form-item label="村" prop="village">
						<el-select v-model="state.queryForm.village" placeholder="请选择村" clearable>
							<el-option :label="item.name" :value="item.id" v-for="(item, index) in village" :key="index" />
						</el-select>
					</el-form-item>
					<el-form-item label="家庭医生" prop="familyDoctor">
						<el-select v-model="state.queryForm.familyDoctor" placeholder="请选择家庭医生" clearable>
							<el-option :key="item.userId" :label="item.name" :value="item.userId" v-for="item in doctorList" />
						</el-select>
					</el-form-item>

					<el-form-item label="专病医生" prop="zbDoctor">
						<el-select v-model="state.queryForm.zbDoctor" placeholder="请选择专病医生" clearable>
							<el-option :key="item.userId" :label="item.name" :value="item.userId" v-for="item in ZBDoctorList" />
						</el-select>
					</el-form-item>

					<el-form-item label="反馈用药" prop="drugStatus">
						<el-select v-model="state.queryForm.drugStatus" placeholder="请选择反馈用药信息" clearable>
							<el-option label="未反馈" value="0" />
							<el-option label="已反馈" value="1" />
						</el-select>
					</el-form-item>

					<el-form-item>
						<el-button @click="getDataList" formDialogRef icon="search" type="primary">
							{{ $t('common.queryBtn') }}
						</el-button>
						<el-button @click="resetQuery" formDialogRef icon="Refresh">{{ $t('common.resetBtn') }} </el-button>
					</el-form-item>
				</el-form>
			</el-row>

			<el-row>
				<div class="mb8" style="width: 100%">
					<el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()" v-auth="'blood_bloodxCustomerSpecial_add'">
						新 增
					</el-button>
					<el-button
						plain
						:disabled="multiple"
						icon="Delete"
						type="primary"
						v-auth="'blood_bloodxCustomerSpecial_del'"
						@click="handleDelete(selectObjs)"
					>
						删除
					</el-button>
					<el-button plain icon="upload-filled" type="primary" class="ml10" @click="excelUploadRef.show()" v-auth="'blood_bloodxCustomer_export'">
						导入
					</el-button>
					<el-button plain icon="Pointer" type="primary" class="ml10" @click="handleOpenDirectPointDialog">定向积分</el-button>
					<!--          <el-button plain icon="Pointer" type="primary" class="ml10" @click="bloodSugar"> 血糖监测录入</el-button>-->
					<right-toolbar
						v-model:showSearch="showSearch"
						:export="'blood_bloodxCustomerSpecial_export'"
						@exportExcel="exportExcel"
						class="ml10 mr20"
						style="float: right"
						@queryTable="getDataList"
					></right-toolbar>
				</div>
			</el-row>
			<el-table
				:data="state.dataList"
				v-loading="state.loading"
				border
				:cell-style="tableStyle.cellStyle"
				:header-cell-style="tableStyle.headerCellStyle"
				@selection-change="selectionChangHandle"
				highlight-current-row
				@current-change="handleCurrentChange"
				@sort-change="sortChangeHandle"
			>
				<el-table-column type="selection" width="40" align="center" />
				<el-table-column type="index" label="#" width="45" />
				<el-table-column prop="name" label="姓名" width="75" show-overflow-tooltip />
				<el-table-column prop="birthday" label="出生日期" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.birthday?.substring(0, 10) }}
					</template>
				</el-table-column>
				<el-table-column prop="age" label="年龄" width="55" show-overflow-tooltip />
				<el-table-column prop="sex" label="性别" width="60" show-overflow-tooltip>
					<template #default="scope">
						<!--            <dict-tag :options="bloodx_health" :value="scope.row.healthStatus"></dict-tag>-->
						<el-tag v-if="scope.row.sex === '1'">男</el-tag>
						<el-tag v-if="scope.row.sex === '2'">女</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="icCard" label="身份证号" show-overflow-tooltip />
				<el-table-column prop="tel" label="联系电话" show-overflow-tooltip />
				<el-table-column prop="address" label="地址" show-overflow-tooltip />

				<!--          <el-table-column prop="localCard" label="卡号"  show-overflow-tooltip/>-->
				<el-table-column prop="medicalCard" label="社保卡号" show-overflow-tooltip />
				<el-table-column prop="healthStatus" label="管理状态" width="85" show-overflow-tooltip>
					<template #default="scope">
						<!--            <dict-tag :options="bloodx_health" :value="scope.row.healthStatus"></dict-tag>-->
						<el-tag v-if="scope.row.healthStatus === '3'" type="warning">注销</el-tag>
						<el-tag v-if="scope.row.healthStatus === '1'">正常</el-tag>
						<el-tag v-if="scope.row.healthStatus === '2'" type="danger">死亡</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="village" label="村" show-overflow-tooltip width="80">
					<template #default="scope">
						<template v-for="item in village">
							{{ scope.row.village === item.id ? item.name : '' }}
						</template>
					</template>
				</el-table-column>
				<el-table-column prop="doctorName" label="家庭医生" show-overflow-tooltip />

				<el-table-column prop="zbDoctor" label="专病医生" show-overflow-tooltip>
					<template #default="scope">
						<template v-for="item in ZBDoctorList">
							{{ scope.row.zbDoctor === item.userId ? item.name : '' }}
						</template>
					</template>
				</el-table-column>
				<el-table-column prop="totalPoint" label="总积分" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="doubleSign" label="双签患者" show-overflow-tooltip>
					<template #default="scope">
						<el-tag v-if="scope.row.doubleSign === 1">双签</el-tag>
						<el-tag v-if="scope.row.doubleSign === 0" type="warning">非双签</el-tag>
					</template>
				</el-table-column>
				<!--          <el-table-column prop="examNum" label="体检次数"  show-overflow-tooltip/>-->
				<!--          <el-table-column prop="drugStatus" label="药品监控字段。0-正常，1-异常"  show-overflow-tooltip/>-->
				<!--          <el-table-column prop="height" label="身高"  show-overflow-tooltip/>-->
				<!--          <el-table-column prop="weight" label="体重"  show-overflow-tooltip/>-->
				<!--          <el-table-column prop="bloodPressure" label="血压"  show-overflow-tooltip/>-->
				<!--          <el-table-column prop="bmi" label="BMI数值"  show-overflow-tooltip/>-->

				<el-table-column label="并发症" width="80" fixed="right">
					<template #default="scope">
						<el-button text type="primary" v-auth="'blood_bloodxCustomer_edit'" @click="bloodxCustomerIllnessDialogRef.openDialog(scope.row)"
							>并发症
						</el-button>
					</template>
				</el-table-column>

				<el-table-column label="服药情况" width="90" fixed="right">
					<template #default="scope">
						<el-button
							text
							:type="scope.row.drugStatus === 1 ? 'warning' : 'primary'"
							v-auth="'blood_bloodxCustomer_edit'"
							@click="bloodxCustomerDrugDialogRef.openDialog(scope.row)"
						>
							服药情况
						</el-button>
					</template>
				</el-table-column>

				<el-table-column label="就诊记录" width="110" fixed="right">
					<template #default="scope">
						<el-button icon="Tickets" text type="primary" @click="bloodTicketRef.openDialog(scope.row)">就诊记录 </el-button>
					</template>
				</el-table-column>

				<el-table-column label="基础信息" width="110" fixed="right">
					<template #default="scope">
						<el-button icon="Document" text type="primary" @click="userFormRef.openDialog(scope.row.id)">常规信息 </el-button>
					</template>
				</el-table-column>

				<el-table-column label="操作" width="140" fixed="right">
					<template #default="scope">
						<el-button icon="edit-pen" text type="primary" v-auth="'blood_bloodxCustomerSpecial_edit'" @click="formDialogRef.openDialog(scope.row.id)"
							>编辑
						</el-button>
						<el-button icon="delete" text type="primary" v-auth="'blood_bloodxCustomerSpecial_del'" @click="handleDelete([scope.row.id])"
							>删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
		</div>

		<!-- 编辑、新增  -->
		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
		<!-- 导入居民 -->
		<upload-excel
			ref="excelUploadRef"
			title="导入居民"
			url="/admin/bloodxCustomerSpecial/import"
			temp-url="/admin/sys-file/local/file/bloodxCustomer.xlsx"
			@refreshDataList="getDataList"
		/>

		<user-form ref="userFormRef" />

		<!-- 打开并发症页面 -->
		<bloodx-customer-illness-dialog ref="bloodxCustomerIllnessDialogRef" />

		<!--    打开服药情况-->
		<bloodx-customer-drug-dialog ref="bloodxCustomerDrugDialogRef" @refresh="getDataList(false)" />

		<!-- 血糖监测  -->
		<blood-form-dialog ref="bloodFormDialogRef" />

		<!--    就诊记录-->
		<blood-ticket ref="bloodTicketRef" />

		<!-- 定向积分 -->
		<direct-point ref="directPointRef" @add-success="getDataList(false)" />
	</div>
</template>

<script setup lang="ts" name="systemBloodxCustomerSpecial">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { fetchList, delObjs } from '/@/api/blood/bloodxCustomerSpecial';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useDict } from '/@/hooks/dict';
import { getAllZbDoctor, getDoctorList } from '/@/api/information/village';
import { sysVillageList } from '/@/api/blood/bloodxCustomer';
import DirectPoint from './direct_point.vue';

const BloodFormDialog = defineAsyncComponent(() => import('../bloodxCustomerBlood/form.vue'));
// 定义字典
const { bloodx_health } = useDict('bloodx_health');

// 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
const BloodxCustomerIllnessDialog = defineAsyncComponent(() => import('../bloodxCustomerIllness/index.vue'));
const BloodxCustomerDrugDialog = defineAsyncComponent(() => import('../bloodxCustomerDrugSpecial/index.vue'));
const BloodTicket = defineAsyncComponent(() => import('/@/views/blood/bloodxCustomer/bloodTicket.vue'));
const UserForm = defineAsyncComponent(() => import('./userForm.vue'));

// 定义查询字典

// 定义变量内容
const formDialogRef = ref();
const excelUploadRef = ref();
// 搜索变量
const queryRef = ref();
const showSearch = ref(true);
const bloodFormDialogRef = ref();
const bloodxCustomerIllnessDialogRef = ref();
const bloodxCustomerDrugDialogRef = ref();
const bloodTicketRef = ref();
const userFormRef = ref();

// 多选变量
const selectObjs = ref([]) as any;
const multiple = ref(true);
const currentRow = ref();
const doctorList = ref<any[]>([]);
const village = ref<any[]>([]);
const ZBDoctorList = ref<any[]>([]);

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	pageList: fetchList,
});

//  table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
	// 清空搜索条件
	queryRef.value?.resetFields();
	// 清空多选
	selectObjs.value = [];
	getDataList();
};

const bloodSugar = () => {
	if (!currentRow.value) {
		useMessage().warning('请选择一条数据');
		return;
	}
	bloodFormDialogRef.value.openDialog(currentRow.value);
};

const getdoctorList = () => {
	getDoctorList().then((res) => {
		doctorList.value = res.data;
	});

	sysVillageList().then((res) => {
		village.value = res.data;
	});

	getAllZbDoctor().then((res) => {
		ZBDoctorList.value = res.data;
	});
};
// 导出excel
const exportExcel = () => {
	downBlobFile('/blood/bloodxCustomerSpecial/export', Object.assign(state.queryForm, { ids: selectObjs }), '糖尿病居民.xlsx');
};

// 多选事件
const selectionChangHandle = (objs: { id: string }[]) => {
	selectObjs.value = objs.map(({ id }) => id);
	multiple.value = !objs.length;
};

const handleCurrentChange = (row: any) => {
	currentRow.value = row;
};

// 删除操作
const handleDelete = async (ids: string[]) => {
	try {
		await useMessageBox().confirm('此操作将永久删除');
	} catch {
		return;
	}

	try {
		await delObjs(ids);
		getDataList(false);
		useMessage().success('删除成功');
	} catch (err: any) {
		useMessage().error(err.msg);
	}
};

// 检查是否选中患者
function checkSelectPatient() {
	return new Promise((resolve, reject) => {
		if (!currentRow.value) {
			useMessage().warning('请选择患者');
			reject(false);
		}
		resolve(true);
	});
}

const directPointRef = ref();

// 打开定向积分dialog
function handleOpenDirectPointDialog() {
	checkSelectPatient().then(() => {
		directPointRef.value.openDialog(currentRow.value);
	});
}

// 创建时

onMounted(() => {
	getdoctorList();
});
</script>
